<template>
  <div id="app">
    <a-layout
      id="components-layout-demo-custom-trigger"
      style="min-height: 100vh"
    >
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
        <div class="logo">{{ collapsed ? "后台" : "后台管理中心" }}</div>
        <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
          <a-menu-item key="1">
            <router-link to="/admin/home" tag="div">
              <a-icon type="setting" />
              <span>系统设置</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="2">
            <router-link to="/admin/goodList" tag="div">
              <a-icon type="appstore" />
              <span>产品管理</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="3">
            <router-link to="/admin/orderList" tag="div">
              <a-icon type="unordered-list" />
              <span>订单管理</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="4">
            <router-link to="/admin/GifGenerate" tag="div">
              <a-icon type="picture" />
              <span>GIT生成</span>
            </router-link>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <!--header-->
        <a-layout-header style="background: #fff; padding: 0">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
          <a-dropdown style="float: right; margin-right: 16px">
            <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
              <a-avatar
                icon="user"
                style="margin-right: 5px; background-color: #87d068"
              />
              Admin<a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <!-- <a-menu-item>
                <a href="javascript:;" @click="showModal">修改密码</a>
              </a-menu-item> -->


              <a-menu-item>
                <a href="javascript:;" @click="logout">退出登录</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>

          <!--模态框-->
        </a-layout-header>

        <!--header-->
        <!--content-->

        <router-view></router-view>

        <!--content-->
        <a-layout-footer
          style="text-align: center; padding: 0px 50px 15px 50px"
        >
          Ant Design ©2023 Created by Lee
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>
  
<script>

export default {
  name: "Aside",
  components: {},
  data() {
    return {
      collapsed: false,
      ModalText: "Content of the modal",
      confirmLoading: false,
    };
  },
  methods: {
    logout() {
      this.$message.success("已退出登录");
      //这里还需要清除cookie
      setTimeout(() => {
        this.$router.push('/admin/login')
      }, 800);
    },
    
  },
};
</script>
  
  <style >
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}
#components-layout-demo-custom-trigger .logo {
  height: 32px;
  /* background: rgba(255, 255, 255, 0.2); */
  margin: 16px;
  color: #fff;
  font-family: "黑体";
  font-size: 20px;
  text-align: center;
}
</style>